<template>
  <div class="app-container">
    <div class="filter-container">
      <el-input style="width: 200px;" v-model="listQuery.person_id" size="small" :placeholder="$t('table.worker_id')" clearable
        @change="handleFilter" />
      <el-button type="primary" size="mini">{{$t('table.search')}}</el-button>
      <el-button type="primary" size="mini" @click="toOvertimeSetting">{{$t('menu.overtime_period_setting')}}</el-button>
      <add-page @getList="getLists"></add-page>
    </div>
    <div>
      <el-table v-loading="listLoading" :data="list" element-loading-text="Loading" border fit highlight-current-row :header-cell-style="{
            background: '#f2f2f2',
            color: '#606266',
            height: '10px',
            padding: '5px'
          }" height="640px" width="80%" :row-style="{ height: '40px', padding: '0px' }" :cell-style="{ padding: '0px' }">
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column :label="$t('table.worker_id')" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.person_id }}</span>
          </template>
        </el-table-column>
        <el-table-column :label="$t('table.overtime_people')" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.name }}</span>
          </template>
        </el-table-column>
        <el-table-column :label="$t('table.overtime_name')" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.overtime_name }}</span>
          </template>
        </el-table-column>
        <el-table-column :label="$t('table.company')" align="center">
          <template slot-scope="scope">
            {{ scope.row.company }}
          </template>
        </el-table-column>
        <el-table-column :label="$t('table.start_time')" align="center">
          <template slot-scope="scope">
            {{ scope.row.begin_time |toTimes }}
          </template>
        </el-table-column>
        <el-table-column :label="$t('table.end_time')" align="center">
          <template slot-scope="scope">
            {{ scope.row.end_time |toTimes }}
          </template>
        </el-table-column>
        <el-table-column :label="$t('table.plan_overtime')" align="center">
          <template slot-scope="scope">
            {{ scope.row.overtime }}
          </template>
        </el-table-column>
        <el-table-column align="center" :label="$t('table.remark')">
          <template slot-scope="scope">
            {{ scope.row.desc }}
          </template>
        </el-table-column>
        <el-table-column align="center" :label="$t('table.operation')">
          <template slot-scope="scope">
            <el-button type="danger" size="mini" @click="showDelDia(scope.row.worker_overtime_id)">{{$t('table.delete')}}</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <div class="pagination-container">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="current_page" :page-sizes="[15, 50, 100]"
          :page-size="per_page" layout="total, sizes, prev, pager, next, jumper" :total="total">
        </el-pagination>
      </div>
      <!-- 删除对话框  star-->
      <el-dialog :title="$t('table.tip')" :visible.sync="delDialogVisible" width="30%">
        <span>{{$t('table.delete_msg')}}</span>
        <span slot="footer" class="dialog-footer">
          <el-button @click="delDialogVisible=false">{{$t('table.cancel')}}</el-button>
          <el-button type="primary" @click="del()">{{$t('table.confirm')}}</el-button>
        </span>
      </el-dialog>
      <!-- 删除对话框 end-->
    </div>
  </div>
</template>
<script>
import axios from "axios";
import store from "@/store";
import addPage from "./addPage";
import { getList, deleteInfo } from "@/api/attendance_management/overtime.js";
export default {
  components: {
    addPage,
  },
  data() {
    return {
      list: null,
      listLoading: true,
      total: null,
      current_page: null,
      last_page: null,
      per_page: null,
      listQuery: {
        person_id: null,
        page: 1,
        pagesize: 15,
      },
      del_id: null,
      delDialogVisible: false,
    };
  },
  created() {
    this.getLists();
  },
  methods: {
    getLists() {
      this.listLoading = true;
      getList(store.getters.token, this.listQuery).then((res) => {
        console.log(res, "res");
        this.list = res.data.list.data;
        this.current_page = res.data.list.current_page;
        this.per_page = res.data.list.per_page;
        this.last_page = res.data.list.last_page;
        this.total = res.data.list.total;
        this.listLoading = false;
      });
    },
    // 分页相关方法
    handleFilter() {
      this.listQuery.page = 1;
      this.getLists();
    },
    handleSizeChange(val) {
      this.listQuery.pagesize = val;
      this.getLists();
    },
    handleCurrentChange(val) {
      this.listQuery.page = val;
      this.getLists();
    },
    // 展示删除提示框
    showDelDia(id) {
      this.delDialogVisible = true;
      this.del_id = id;
    },
    // 删除
    del() {
      deleteInfo(store.getters.token, { worker_overtime_id: this.del_id }).then(
        (res) => {
          if (res.data.status === true) {
            this.$message.success(this.$t("table.delete_complete"));
          } else {
            this.$message.error(this.$t("table.delete_fail"));
          }
          this.getLists();
        }
      );
      this.delDialogVisible = false;
    },
    toOvertimeSetting() {
      this.$router.push("../overtime_setting/index");
    },
  },
};
</script>
<style scoped>
.block {
  display: inline-block;
  margin-left: 20px;
}

.app-container {
  border: #eee solid 10px;
}
</style>
